<template>
  <!--  搜索结果展示  -->
  <div class="root">
    <!-- 导航栏 -->
    <topbar />
    <!-- 搜索栏 -->
    <searchbar />
    <div class="body">
      <div class="right_body">
        <div class="search_tab">
          <ul class="tabs">
            <li
              :class="[click_index == index ? 'tab firstA' : 'tab']"
              @click="change_nav_index(index)"
              v-for="(item, index) in search_nav_list"
              :key="index"
            >
              {{ item }}
            </li>
          </ul>
        </div>
        <div class="search_nav_fix">
          <div class="search_nav_fix_title">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item
                >分类
                <!-- <i class="el-breadcrumb__separator el-icon-arrow-right"></i> -->
              </el-breadcrumb-item>
              <el-breadcrumb-item>活动管理</el-breadcrumb-item>
              <!-- <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
            </el-breadcrumb>
          </div>
          <div class="search_group">
            <div class="filter_bar">
              <ul class="tabs">
                <li
                  :class="[
                    click_filter_index == filter_index
                      ? 'filter_tab firstB'
                      : 'filter_tab',
                  ]"
                  v-for="(filter_item, filter_index) in filter_bar_list"
                  :key="filter_index"
                  @click="filter_bar_click(filter_index)"
                >
                  {{ filter_item }}
                </li>
              </ul>
              <div class="search_pager"></div>
            </div>
            <div class="search_filter_check">
              <div class="search_filter_check_center">
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="包邮"></el-checkbox>
                  <el-checkbox label="新品"></el-checkbox>
                  <el-checkbox label="公益"></el-checkbox>
                  <el-checkbox label="二手"></el-checkbox>
                  <el-checkbox label="小白"></el-checkbox>
                  <el-checkbox label="正品保障"></el-checkbox>
                  <el-checkbox label="7+天内退货"></el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
        <div class="search_gird_shop_ui">
          <div class="search_gird_item" v-for="(data,index) in shop_list" :key="index">
            <div class="search_gird_item_img">
              <!-- 跳转商品展示 -->

              <router-link to="/items">
                <img src="@/assets/images/index/search/dog.jpg" />
              </router-link>
             </div>
            <!-- 商品描述 -->
            <div class="search_gird_item_represent">
              <div class="ctx_box">
                <div class="search_gird_item_represent_row1 g">
                  <span class="price">￥{{ data.shop_price }}</span>
                  <div class="icon_box">
                    <img src="@/assets/images/index/search/shipping.png" />
                  </div>
                </div>
                <div class="search_gird_item_represent_row2 g">
                  <!-- 跳转商品展示 -->
                  <router-link to="/items">
                    <span> {{data.shop_title}} </span>
                  </router-link>
                </div>
                <div class="search_gird_item_represent_row3 g">
                  <div class="row">
                    <router-link :to="{path:'/shop',query:{id:data.store_id}}">
                      <span> <i class="el-icon-s-unfold"></i> </span>
                      <span>{{data.store_name}}</span>
                    </router-link>
                  </div>
                </div>
                <div class="search_gird_item_represent_row4 g">
                  <div class="router_index_box">
                    <a href="http://localhost:8080/#/"
                      ><svg
                        t="1652598184963"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="1946"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M844.44 378.58v396.35c0 67.36-55.22 122.59-122.59 122.59H300.53c-67.36 0-122.59-55.22-122.59-122.59V378.58l333.25-219.44 333.25 219.44z"
                          fill="#F7B52C"
                          p-id="1947"
                        ></path>
                        <path
                          d="M511.19 729.48c-71.63 0-129.91-58.28-129.91-129.91s58.28-129.91 129.91-129.91S641.1 527.94 641.1 599.57s-58.28 129.91-129.91 129.91z m0-188.4c-32.25 0-58.5 26.24-58.5 58.5s26.24 58.5 58.5 58.5c32.26 0 58.5-26.24 58.5-58.5s-26.24-58.5-58.5-58.5z"
                          fill="#FFFFFF"
                          p-id="1948"
                        ></path>
                        <path
                          d="M927.07 360.36L530.52 105.12c-0.75-0.48-1.55-0.76-2.32-1.18-1.16-0.63-2.3-1.29-3.52-1.79-1.08-0.44-2.17-0.72-3.27-1.04-1.11-0.33-2.21-0.7-3.35-0.93-1.11-0.22-2.21-0.29-3.33-0.4-1.2-0.12-2.38-0.27-3.59-0.27-1.01 0-1.99 0.14-3 0.22-1.31 0.11-2.61 0.2-3.91 0.46-0.95 0.19-1.86 0.51-2.79 0.77-1.28 0.36-2.55 0.7-3.8 1.21-1.07 0.44-2.06 1.03-3.08 1.57-0.89 0.47-1.81 0.81-2.67 1.36L95.31 360.36c-16.6 10.69-21.39 32.78-10.72 49.35 6.83 10.6 18.32 16.39 30.06 16.39 6.63 0 13.32-1.84 19.29-5.67l377.25-242.8 377.23 242.8a35.558 35.558 0 0 0 19.29 5.67c11.72 0 23.22-5.79 30.06-16.39 10.68-16.58 5.9-38.66-10.7-49.35z"
                          fill="#F7B52C"
                          p-id="1949"
                        ></path></svg
                    ></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page_box">
        <div class="page_box_small">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="4000"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <bottom />
  </div>
</template>

<script>
import topbar from "@/components/topbar.vue";
import searchbar from "@/components/search_shop/search_title_components.vue";
import bottom from "@/components/bottom.vue";
export default {
  components: {
    topbar,
    searchbar,
    bottom,
  },

  data() {
    return {
      currentPage4: 4,
      click_filter_index: 0,
      click_index: 0,
      search_nav_list: ["所有商品", "小白", "二手"],
      filter_bar_list: ["综合", "销量", "信用", "价格"],
      checkList: [],
      shop_list:[{
        shop_id:1,
        store_id:0,
        shop_img:"@/assets/images/index/search/dog.jpg",
        shop_price:100,
        shop_title:"抢购小白家狗头抱枕 女生最爱",
        store_name:"别叫我狗子官方旗舰店",
      },{
        shop_id:1,
        store_id:0,
        shop_img:"@/assets/images/index/search/dog.jpg",
        shop_price:100,
        shop_title:"抢购小白家狗头抱枕 女生最爱",
        store_name:"别叫我狗子官方旗舰店",
      },{
        shop_id:1,
        store_id:0,
        shop_img:"@/assets/images/index/search/dog.jpg",
        shop_price:100,
        shop_title:"抢购小白家狗头抱枕 女生最爱",
        store_name:"别叫我狗子官方旗舰店",
      },{
        shop_id:1,
        store_id:0,
        shop_img:"@/assets/images/index/search/dog.jpg",
        shop_price:100,
        shop_title:"抢购小白家狗头抱枕 女生最爱",
        store_name:"别叫我狗子官方旗舰店",
      }
      ],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    filter_bar_click(filter_index) {
      this.click_filter_index = filter_index;
    },
    change_nav_index(index) {
      this.click_index = index;
    },
  },
};
</script>

<style>
.page_box_small {
  width: 670px;
  height: auto;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-70%, -50%);
}
.page_box {
  width: 100%;
  height: 60px;
  position: relative;
}
.router_index_box {
  width: 20px;
  height: 20px;
  margin-top: 8px;
}
em {
  color: #f40;
  font-style: unset;
}
.row {
  margin-top: 5px;
}
.search_gird_item_represent_row3 a:hover {
  text-decoration: underline;
  color: #f40;
}
.search_gird_item_represent_row3 a {
  font-size: 14px;
  color: #000000;
}
.search_gird_item_represent_row3 {
  width: 100%;
  height: auto;
}
.equalthan {
  background: #f40;
}
.search_gird_item_represent_row2 a:hover {
  text-decoration: underline;
  color: #f40;
}
.search_gird_item_represent_row2 a {
  font-size: 14px;
  color: #000000;
}
.search_gird_item_represent_row2 {
  width: 100%;
  height: auto;
}
.icon_box img {
  border-radius: 30px;
}
.icon_box {
  width: auto;
  height: auto;
  line-height: 25px;
  margin-left: 5px;
}
.ctx_box {
  width: 100%;
  height: 90%;
  margin-top: 11px;
}
/* 垂直居中 */

.search_gird_item_represent_row1 {
  margin-top: 11px;
  display: flex;
  flex-wrap: nowrap;
}
.g {
  width: 90%;
  height: auto;
  margin: 0 auto;
}
.price {
  color: #f40;
  font-weight: 700;
  font-size: 18px;
  font-weight: bold;
}
.search_gird_item_represent {
  width: 100%;
  height: calc(100% - 224px);
  border: 1px solid #e8e8e8;
}
.search_gird_item_img img {
  width: 100%;
  height: 225px;
}
.search_gird_item_img {
  width: 100%;
  height: 225px;
  margin: 0 auto;
}
.search_gird_item {
  width: 220px;
  height: 364px;
  margin-top: 17px;
  /* margin-right: 17px; */
}
.search_gird_shop_ui {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

}
.search_filter_check_center {
  margin-left: 20px;
  /* 垂直居中 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.search_filter_check {
  width: auto;
  height: 40px;
  border: 1px solid #e8e8e8;
  border-top: unset;
  position: relative;
}
.search_pager {
  width: auto;
  height: 100%;
  background-color: #f5f5f5;
}
/* 点击之后的样式 */
.firstB {
  background-color: #fff;
  color: #f40;
}
.filter_tab:hover {
  background: #fff;
  color: #f40;
  cursor: pointer;
  /* border: solid 1px #e8e8e8; */
  transform: 0.3s;
}
.filter_tab {
  font-size: 16px;
  width: 100px;
  height: 100%;
  float: left;
  line-height: 39px;
  text-align: center;
}
.filter_bar {
  width: auto;
  height: 39px;
  background-color: #f5f5f5;
  padding: 0;
  margin: 0;
  border: 1px solid #e8e8e8;
}
.search_group_head {
  width: 72px;
}
.search_group {
  width: 100%;
  height: 80px;
  margin-top: 11px;
}
.search_nav_fix_title {
  width: 100%;
  height: auto;
  margin-top: 15px;
}
.search_nav_fix {
  width: 100%;
  height: auto;
}
.firstA {
  background: #f40;
  color: #fff;
}
.tab:hover {
  background: #f40;
  color: #fff;
  cursor: pointer;
  transform: 0.3s;
}
.tab {
  font-size: 16px;
  width: 100px;
  height: 100%;
  float: left;
  line-height: 40px;
  text-align: center;
}

.tabs {
  font-family: tahoma, arial, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
}
.search_tab {
  width: 940px;
  height: 40px;
  display: block;
  border-bottom: 2px solid #f40;
  margin-top: 15px;
}
.right_body {
  width: 940px;
  height: auto;
}
.body {
  width: 1200px;
  height: auto;
  margin: 0 auto;
}
</style>
